import React, { Component } from "react";
import { withRouter } from "react-router-dom";
import { Popconfirm } from "antd";
import { removeStorage } from "../../utils";
import weather from "../../assets/images/header/weather.png";
import "./header.less";

class header extends Component {
  state = {
    open: false,
    confirmLoading: false,
  };
  showPopconfirm = () => {
    this.setState({
      ...this.state,
      open: true,
    });
  };
  handleOk = () => {
    this.setState({
      ...this.state,
      confirmLoading: true,
    });
    removeStorage("userInfo");
    removeStorage("keyPath");
    this.setState({
      ...this.state,
      open: false,
      confirmLoading: false,
    });
    // @ts-ignore
    this.props.history.replace("/login");
  };
  handleCancel = () => {
    this.setState({
      ...this.state,
      open: false,
    });
  };
  render() {
    return (
      <div className="header">
        <div className="header-right">
          <span className="header-user">欢迎：admin</span>
          <Popconfirm
            title="提示"
            description="确定退出登录吗？"
            okText="确定"
            cancelText="取消"
            open={this.state.open}
            onConfirm={this.handleOk}
            okButtonProps={{ loading: this.state.confirmLoading }}
            onCancel={this.handleCancel}
          >
            <span className="header-logout" onClick={this.showPopconfirm}>
              退出登录
            </span>
          </Popconfirm>

          <img className="header-weatherpng" src={weather} alt="" />
          <span className="header-centigrade">23℃</span>
        </div>
      </div>
    );
  }
}

export default withRouter(header);
